<template>
  <div>
    <div class="title-row">
      <span class="title-row-bar" />
      表同步方式情况
    </div>
    <!-- Cards -->
    <div class="panel-group">

      <div class="card-panel total">
        <div class="card-panel-description">
          <div class="card-panel-text">总记录数</div>
          <count-to
            :start-val="0"
            :end-val="totalNum"
            :duration="3000"
            class="card-panel-num"
          />
        </div>
      </div>

      <div class="card-panel">
        <div class="card-panel-description">
          <div class="card-panel-text">已确认</div>
          <count-to
            :start-val="0"
            :end-val="confirmNum"
            :duration="2600"
            class="card-panel-num"
          />
        </div>
      </div>

      <div class="card-panel orange">
        <div class="card-panel-description">
          <div class="card-panel-text">待确认</div>
          <count-to
            :start-val="0"
            :end-val="confirmWaitNum"
            :duration="3000"
            class="card-panel-num"
          />
        </div>
      </div>

      <div class="card-panel green">
        <div class="card-panel-description">
          <div class="card-panel-text">已过滤</div>
          <count-to
            :start-val="0"
            :end-val="filterNum"
            :duration="3200"
            class="card-panel-num"
          />
        </div>
      </div>
      <!-- Chart -->
    </div>

    <!-- Chart -->
    <div
      id="tblSync"
      style="width: 100%; height: 300px"
    />
  </div>
</template>

<script>
import '@/assets/styles/chartPanel.scss'
import CountTo from 'vue-count-to'
import echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
  components: {
    CountTo
  },
  data() {
    return {
      confirmNum: 0,
      confirmWaitNum: 0,
      filterNum: 0,
      totalNum: 0
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      // var data = {}
      // requestData
      //   .TableSyncTotal(data)
      //   .then((data) => {
      //     if (data.已确认) {
      //       this.confirmNum = data.已确认
      //     } else {
      //       this.confirmNum = 0
      //     }
      //     if (data.待确认) {
      //       this.confirmWaitNum = data.待确认
      //     } else {
      //       this.confirmWaitNum = 0
      //     }
      //     if (data.已过滤) {
      //       this.filterNum = data.已过滤
      //     } else {
      //       this.filterNum = 0
      //     }
      //     if (data.总记录数) {
      //       this.totalNum = data.总记录数
      //     } else {
      //       this.totalNum = 0
      //     }
      //     this.tblSyncChart()
      //   })
      //   .catch(() => { })
    },

    tblSyncChart() {
      var myChart = echarts.init(document.getElementById('tblSync'))

      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '0',
          data: ['已确认', '待确认', '已过滤']
        },
        calculable: true,
        series: [
          {
            name: '表同步方式情况',
            type: 'pie',
            center: ['50%', '50%'],
            data: [
              {
                value: this.confirmNum,
                name: '已确认',
                itemStyle: { color: '#3178F4' }
              },
              {
                value: this.confirmWaitNum,
                name: '待确认',
                itemStyle: { color: '#F7A94E' }
              },
              {
                value: this.filterNum,
                name: '已过滤',
                itemStyle: { color: '#3FDBAB' }
              }
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
      const erd = elementResizeDetectorMaker()
      erd.listenTo(document.getElementById('tblSync'), (element) => {
        myChart.resize()
      })
    }
  }
}
</script>
